<div class="container">
	<div class="box">
		<div class="box-header">
			<p class="title">数据库关系图</p>
			<p class="sub-title">基于json数据与百度地图</p>
		</div>
		<div class="box-body">
			<div id="chart_database" style="height: 500px;width: 100%;"></div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/static/lib/jsplumb/jsplumb.min.js"></script>
<script type="text/javascript">
	$(function() {

		var line = 3; //行：把画布上画几行信息框
			var column = 4; //列：把画布上画几列信息框

		function getSeries(myChart, data) {
			var series = [];
			series.push({
				type: 'scatter',
				symbol: 'rect',
				zlevel: 2,
				silent: true,
				symbolSize: function(value, params) {
					return [params.data.w, params.data.h];
				},
				itemStyle: {
					normal: {
						shadowBlur: 10,
						shadowColor: 'rgba(120, 36, 50, 0.5)',
						shadowOffsetY: 5,
						color: function(params) {
							if (params.data.type == 'table') {
								return '#007CB8';
							} else {
								return '#6DC6F2';
							}
						}
					}
				},
				label: {
					normal: {
						show: true,
						position: 'inside',
						formatter: function(params) {
							return params.data.item.name;
						},
						textStyle: {
							color: '#000'
						}
					}
				},
				data: getScatterData(myChart, data),
			});
			return series.concat(getLinesData(myChart, data));
		}

		function getScatterData(myChart, data) {
			var scatterData = [];
			
			//画布宽高
			var c_w = myChart.getWidth();
			var c_h = myChart.getHeight();
			//计算信息框的宽高
			var w = c_w / (column * 2);
			var h = 16;
			for (var i = 0; i < data.nodes.length; i++) {
				//把消息框分为两部分：标题和内容,内容高度为标题高度的3倍，echart是以中心画图，所以要分别计算标题和内容框的中心点位置
				scatterData.push({
					id: data.nodes[i].id,
					value: [data.nodes[i].x, (data.nodes[i].y * c_h ) / c_h],
					type: 'table',
					item: data.nodes[i],
					w: w,
					h: h,
					label: {
						normal: {
							textStyle: {
								color: '#fff',
								fontWeight: 'bold'
							}
						}
					}
				});
				for (var j = 0; j < data.nodes[i].rows.length; j++) {
					scatterData.push({
						id: data.nodes[i].rows[j].id,
						value: [data.nodes[i].x, (data.nodes[i].y * c_h - h*(j+1)) / c_h],
						type: 'row',
						w: w,
						h: h,
						item: data.nodes[i].rows[j],
						label: {
							normal: {
								textStyle: {
									color: '#000'
								}
							}
						}
					});
				}
			}
			console.log('scatterData',scatterData);
			return scatterData;
		}

		function getLinesData(myChart, data) {
			var linesData = [], map = {}, row = [];
			//画布宽高
			var c_w = myChart.getWidth();
			var c_h = myChart.getHeight();
			//计算信息框的宽高
			var w = c_w / (column * 2);
			var h = 16;

			for (var i = 0; i < data.nodes.length; i++) {
				map[data.nodes[i].id] = data.nodes[i];
				for (var j = 0; j < data.nodes[i].rows.length; j++) {
					row = data.nodes[i].rows[j];
					row.x =  data.nodes[i].x;
					row.y =  (data.nodes[i].y * c_h - h*(j+1)) / c_h;
					map[data.nodes[i].rows[j].id] = row;
				}
			}
			for (var i = 0; i < data.links.length; i++) {
				var source = map[data.links[i].source];
				var target = map[data.links[i].target];

				//画布宽高
				var c_w = myChart.getWidth();
				var c_h = myChart.getHeight();
				//计算信息框的宽高
				var w = c_w / (column * 2);
				var h = c_h / (line * 2);
				//计算信息框的四个边中点的位置
				source.top = {
					x: source.x,
					y: (source.y * c_h + (1 / 2 * h)) / c_h
				};
				source.right = {
					x: (source.x * c_w + (1 / 2 * w)) / c_w,
					y: source.y
				};
				source.bottom = {
					x: source.x,
					y: (source.y * c_h - (1 / 2 * h)) / c_h
				};
				source.left = {
					x: (source.x * c_w - (1 / 2 * w)) / c_w,
					y: source.y
				};

				target.top = {
					x: target.x,
					y: (target.y * c_h + (1 / 2 * h)) / c_h
				};
				target.right = {
					x: (target.x * c_w + (1 / 2 * w)) / c_w,
					y: target.y
				};
				target.bottom = {
					x: target.x,
					y: (target.y * c_h - (1 / 2 * h)) / c_h
				};
				target.left = {
					x: (target.x * c_w - (1 / 2 * w)) / c_w,
					y: target.y
				};

				//s->t：s左：t右
				if (source.right.x < target.left.x) {
					linesData.push(getLine([
						[source.right.x, source.right.y],
						[target.left.x, target.left.y]
					]));
				}
				//t<-s：s右：t左
				else if (source.left.x > target.right.x) {
					linesData.push(getLine([
						[source.left.x, source.left.y],
						[target.right.x, target.right.y]
					]));
				}
				//s
				//|
				//t
				else if (source.bottom.y > target.top.y) {
					linesData.push(getLine([
						[source.bottom.x, source.bottom.y],
						[target.top.x, target.top.y]
					]));
				}
				//t
				//|
				//s
				else if (source.top.y < target.bottom.y) {
					linesData.push(getLine([
						[source.top.x, source.top.y],
						[target.bottom.x, target.bottom.y]
					]));
				}
			}
			return linesData;
		}

		function getLine(coords, data) {
			return {
				name: '',
				type: 'lines',
				coordinateSystem: 'cartesian2d',
				symbol: ['none', 'none'],
				symbolSize: 10,
				zlevel: 4,
				lineStyle: {
					normal: {
						color: '#9EADD6',
						width: 2,
						curveness: 0
					}
				},
				data: [{
					coords: coords
				}]
			};
		}

		

		function drawChart(myChart) {
			myChart.showLoading();
			$.getJSON('/static/json/echart.database.json', function(data) {
				myChart.hideLoading();
				myChart.setOption({
					backgroundColor: '#F3F3F3',
					title: [{
						text: "流程图",
						x: '5%',
						y: 0,
						textStyle: {
							color: '#333',
							fontStyle: 'normal',
							fontWeight: 'normal',
							fontFamily: 'sans-serif',
							fontSize: 14,
						}
					}],
					tooltip: {},
					grid: {
						left: 0,
						right: 0,
						top: 0,
						bottom: 0
					},
					xAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false
						},
						max: 1,
						min: 0
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false
						},
						max: 1,
						min: 0
					},
					series: getSeries(myChart, data)
				});
			});
		}

		drawChart(echarts.init(document.getElementById('chart_database')));
	});
</script>